<template>
<div class="container">
    <div class="w1300">
        <!--面包屑-->
        <div>
            <breadcrumb currentPath="/mall/goods/detail" title="更多商品"></breadcrumb>
        </div>
        <div class="container_waper">
            <div class="category-wrap">
                <div class="tit-wrap flex-xbt">
                    <h2>手机专区</h2>
                    <div style="width:310px">
                        <el-input
                        v-model="searchva"
                        placeholder="搜索商品"
                        class="input-searchva"
                    >
                        <template #append>
                            <el-button :icon="Search" />
                        </template>
                    </el-input>
                    </div>
                </div>
                <div class="category-container">
                    <gooditem/>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import Breadcrumb from '@/pages/mall/components/BreadcrumbCom.vue'
import gooditem from '@/pages/mall/components/gooditem.vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
const searchva=ref('')
</script>

<style lang="scss" scoped>
.container {
    background-color: #f7f8fa;
}
.container_waper{
    min-height: 780px;
    padding-bottom: 26px;
}
.category-wrap {
    padding-top: 20px;
}

.tit-wrap {
    align-items: flex-end;
    padding-bottom: 26px;

    h2 {
        font-size: 24px;
        color: #021429;
    }

    .flex-yc {
        font-size: 14px;
        color: #888;
    }
}

.category-container {
    width: 100%;
    .input-searchva{
        max-width: 600px;
        min-width: 400px;
    }
    .flex-xbt {
        .category-item {
            width: 310px;
            background-color: #fff;

            &:hover {
                box-shadow: rgb(0 0 0 / 10%) 0 0 36px;
            }

            >img {
                display: block;
                width: 310px;
                height: 220px;
                background-color: #d9d9d9;
            }

            .goods-font-wrap {
                padding: 10px;

                .tit {
                    font-size: 14px;
                    line-height: 16px;
                    color: #5f6085;

                    >b {
                        flex-shrink: 0;
                        padding: 0 2px;
                        font-size: 11px;
                        color: #fff;
                        background-color: $primary;
                        border-radius: 2px;
                    }
                }

                .tip-wrap {
                    margin: 9px 0 17px;

                    span {
                        padding: 2px 4px;
                        font-size: 12px;
                        color: $danger;
                        border: 1px solid $danger;
                        border-radius: 2px;

                        &+span {
                            margin-left: 4px;
                        }
                    }
                }

                .price-wrap {
                    font-size: 18px;
                    color: $danger;

                    span {
                        align-items: flex-end;
                        color: $danger;
                    }

                    b {
                        font-size: 13px;
                    }
                }
            }
        }
    }
}
</style>
